<template>
	<view class="page">
		<uni-search-bar v-model="searchObject.name" @confirm="search" @input="input"></uni-search-bar>

		<uni-card title="基础卡片" extra="额外信息" v-for="item in model">
			<text class="uni-body">{{item.id}}这是一个基础卡片示例，此示例展示了一个标题加标题额外信息的标准卡片。</text>
		</uni-card>

		<uni-load-more :status="status"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import request from "/common/api.js"


	const model = ref([])
	const status = ref("more")
	const totalPage = ref(0)
	const searchObject = ref({
		name: "",
		no: 1,
		size: 10
	})

    const serverUrl ="/appRole/search";
	const initData = () => {
		searchObject.value.no = 1;
		request.loadPostCallback(serverUrl, searchObject.value, (res) => {
			if (res.code === 200) {
				model.value = res.data;
				checkMore(res)
			}
			uni.stopPullDownRefresh();
		})
	}

	onShow(() => {
		searchObject.value.no = 1;
		request.loadPostCallback(serverUrl, searchObject.value, (res) => {
			if (res.code === 200) {
				model.value = res.data;
				checkMore(res)
			}
		})
	})

	onPullDownRefresh(() => {
		initData();
	})

	onReachBottom(() => {
		searchObject.value.no = searchObject.value.no + 1;
		request.loadPostCallback(serverUrl, searchObject.value, (res) => {
			if (res.code === 200) {
				if (res.data) {
					model.value = model.value.concat(res.data);
				}
				
				checkMore(res)
			}
		})
	});

	const checkMore = (res) => {
	    totalPage.value = res.totalPage;
		if (searchObject.value.no <= res.totalPage) {
			status.value = "loading";
		} else {
			status.value = "noMore";
			return;
		}

	}

	const search = () => {
		initData();
	}
	const input = () => {

	}
</script>

<style>
	.page {
		width: 100vw;
	}
</style>
